<template>
  <div id="" style="background:white;">
    <headerbox :headerTitle="'我的钱包'" :hasBack='true' :headerRightTxt="'明细'" @headerRightEvent="walletDetail"></headerbox>
    <div id="" class="memberHeader" v-bind:style="{backgroundImage:'url('+backgroundImg+')'}">
      余额 (元)
      <h2>{{(accountInfo.balance).toFixed(2)}}</h2>
    </div>
    <ul class="walletList">
      <li @click="toChildren('reCharge')">
        <span>
          <img src="@/assets/myWallet/recharge_icon.png" alt="">
          充值
        </span>
        <img src="@/assets/playcircleImage/arrow_right1.png" alt="" width="10">
      </li>
      <li @click="toChildren('withdrawCash')">
        <span>
          <img src="@/assets/myWallet/withdrawal_icon.png" alt="">
          提现
        </span>
        <img src="@/assets/playcircleImage/arrow_right1.png" alt="" width="10">
      </li>
      <li @click="toChildren('banklist')">
        <span>
          <img src="@/assets/myWallet/card_icon.png" alt="">
          银行卡
        </span>
        <img src="@/assets/playcircleImage/arrow_right1.png" alt="" width="10">
      </li>
      <li @click="toChildren('withdrawList')">
        <span>
          <img src="@/assets/myWallet/Cashrecord_icon.png" alt="">
          提现记录
        </span>
        <img src="@/assets/playcircleImage/arrow_right1.png" alt="" width="10">
      </li>
    </ul>

    <router-view class="childrenPage"></router-view>
  </div>
</template>
<script>
import { toChildrenPage } from '@/utils/util.js';
import {userAccountInfo} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  data: () => ({
    backgroundImg:require('@/assets/myWallet/background_image1.png'),
    accountInfo:{
      balance:0,
    },
  }),
  components: {
  },
  methods: {
    toChildren(reCharge) {
      toChildrenPage(this,reCharge);
    },
    // 查看明细
    walletDetail(data){
      if(data==1){
        this.toChildren('walletDetail');
      }
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    userAccountInfo({token:xlyd_loginInfo.token}).then(res=>{
      console.log(res);
      if(res) {
        self.accountInfo = res.data.result;
      }
    })
  }
}
</script>
<style lang="scss" scoped>

.memberHeader{
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 30px 10px 100px;
  color: white;
  text-align: center;
  font-size: 12px;
  h2{
    font-size: 1.8rem;
    margin-top: 10px;
  }
}
.walletList{
  background: white;
  li{
    @include flex;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px solid $boxBgcolor;
    padding: 0 10px;
    span img{
      width: 20px;
      margin-right: 4px;
    }
  }
}
</style>
